<template>
    <div class="edit-member-card">
        <!-- 头部标题 -->
        <div class="header">
            <h2>会员卡·编辑会员卡</h2>

        </div>

        <!-- 表单主体 -->
        <el-form label-width="140px" class="card-form">
            <!-- 基本信息设置 -->
            <div class="form-section">
                <h3 class="section-title">基本信息设置</h3>

                <el-form-item label="品牌名：" required>
                    <el-input v-model="form.brandname" placeholder="打撒发的根据" />
                </el-form-item>

                <el-form-item label="会员LOGO：" required>
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleLogoUpload">
                        <template #default>
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </template>
                        <template #tip>
                            <div class="upload-tip">
                                请上传小于1M，jpg、png格式的图片，建议尺寸：1000px*600px
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>

                <el-form-item label="会员卡标题：" required>
                    <el-input v-model="form.title" placeholder="似懂非蠹" />
                </el-form-item>

                <el-form-item label="会员卡主题颜色：" required>
                    <div class="color-picker-group">
                        <el-color-picker v-model="form.color" />
                        <span class="color-tip">同步微信卡的将用到会员卡主题颜色</span>
                    </div>
                </el-form-item>

                <el-form-item label="自定义背景：">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleBgUpload">
                        <template #default>
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </template>
                        <template #tip>
                            <div class="upload-tip">
                                请上传小于1M，jpg、png格式的图片，建议尺寸：1000px*600px
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </div>

            <!-- 会员卡功能设置 -->
            <div class="form-section">
                <h3 class="section-title">会员卡功能设置</h3>

                <el-form-item label="会员卡号：" required>
                    <el-radio-group v-model="form.membershipcardNum">
                        <el-radio label="auto">系统自定义生成19位数字卡号</el-radio>
                        <el-radio label="phone">手机号作为卡号</el-radio>
                        <el-radio label="custom">
                            自定义会员卡号
                            <el-input v-if="form.cardNumberType === 'custom'" v-model="form.validdate"
                                placeholder="只允许字母和数字组合" class="custom-number-input" />
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="有效期：" required>
                    <el-radio-group v-model="form.validdate">
                        <el-radio label="forever">永久有效</el-radio>
                        <el-radio label="date">指定日期
                            <el-date-picker v-if="form.validityType === 'date'" v-model="form.validityDate" type="date"
                                placeholder="请选择日期" />
                        </el-radio>
                        <el-radio label="days">固定长度开卡后
                            <el-input-number v-if="form.validityType === 'days'" v-model="form.validDays" :min="1"
                                :max="999" controls-position="right" class="days-input" /> 天有效（请输入1-999整数）
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>

            <!-- 会员卡详情 -->
            <div class="form-section">
                <h3 class="section-title">会员卡详情</h3>

                <el-form-item label="特权说明：" required>
                    <el-input v-model="form.privilegedintroduce" type="textarea" :rows="4" placeholder="三大法师发撒的发货的" />
                </el-form-item>

                <el-form-item label="使用须知：" required>
                    <el-input v-model="form.usenotice" type="textarea" :rows="4" placeholder="多撒发大水发多少发撒优微" />
                </el-form-item>
            </div>
            <div class="activation-settings">
                <!-- 激活条件部分 -->


                <h3 class="section-title">激活设置</h3>

                <div class="activation-condition">
                    <h4>激活条件：</h4>
                    <el-radio-group v-model="form.activatecondition">
                        <el-radio label="normal">普通激活</el-radio>
                        <el-radio label="paid">付费激活</el-radio>
                        <el-radio label="recharge">充值激活</el-radio>
                    </el-radio-group>
                </div>

                <!-- 会员资料表格 -->
                <div class="member-info">
                    <h4>会员资料：</h4>
                    <el-table :data="memberFields" border style="width: 100%">
                        <el-table-column prop="name" label="信息名称" width="180" />
                        <el-table-column label="启用" width="100">
                            <template #default="{ row }">
                                <el-switch v-model="row.enabled" :disabled="!row.isCustom" active-color="#409EFF" />
                            </template>
                        </el-table-column>
                        <el-table-column label="可修改" width="100">
                            <template #default="{ row }">
                                <el-switch v-model="row.editable" :disabled="!row.enabled" active-color="#409EFF" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template #default="{ row }">
                                <el-button v-if="row.isCustom" type="text" @click="deleteField(row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-button type="text" class="add-button" @click="showAddDialog">
                        + 添加自定义信息
                    </el-button>
                </div>

                <!-- 功能设置 -->
                <div class="function-setting">
                    <h4>功能设置</h4>
                    <el-form-item label="会员卡操作提示：">
                        <el-input v-model="form.operationtip" type="textarea" :rows="2" placeholder="请输入操作提示" />
                    </el-form-item>
                </div>


                <!-- 添加字段对话框 -->
                <el-dialog v-model="dialogVisible" title="添加自定义信息" width="30%">
                    <el-form :model="newField" label-width="80px">
                        <el-form-item label="字段名称" prop="name">
                            <el-input v-model="newField.name" placeholder="请输入字段名称" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="addNewField">确认</el-button>
                    </template>
                </el-dialog>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" size="large">下一步</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const form = reactive({
    brandname: "",
    membershipcardlogo: "",
    title: "",
    color: "",
    background: "",
    membershipcardNum: "",
    validdate: "",
    privilegedintroduce: "",
    usenotice: "",
    operationtip: "",
    activatecondition: "",
    membershipdata: "" 
})

const handleLogoUpload = (file) => {
    console.log('Logo uploaded:', file)
}

const handleBgUpload = (file) => {
    console.log('Background uploaded:', file)
}
// 会员资料数据
const memberFields = ref([
    { name: '手机号', enabled: true, editable: false, isCustom: false },
    { name: '姓名', enabled: true, editable: false, isCustom: false },
    { name: '性别', enabled: true, editable: false, isCustom: false },
    { name: '生日', enabled: true, editable: false, isCustom: false },
    { name: '邮箱', enabled: true, editable: false, isCustom: false },
    { name: '详细地址', enabled: true, editable: false, isCustom: false },
    { name: '学历', enabled: false, editable: false, isCustom: false },
    { name: '行业', enabled: false, editable: false, isCustom: false },
    { name: '收入', enabled: false, editable: false, isCustom: false },
    { name: '爱好', enabled: false, editable: false, isCustom: false }
])

// 对话框相关
const dialogVisible = ref(false)
const newField = reactive({
    name: ''
})

// 删除字段
const deleteField = (row) => {
    memberFields.value = memberFields.value.filter(item => item !== row)
}

// 添加新字段
const addNewField = () => {
    if (newField.name.trim()) {
        memberFields.value.push({
            name: newField.name,
            enabled: true,
            editable: true,
            isCustom: true
        })
        dialogVisible.value = false
        newField.name = ''
    }
}

// 显示对话框
const showAddDialog = () => {
    dialogVisible.value = true
}
</script>

<style scoped>
.edit-member-card {
    max-width: 1000px;
    margin: 20px auto;
    padding: 30px;
    background: #fff;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    h2 {
        color: #303133;
        font-size: 20px;
    }
}

.step-indicator {
    color: #606266;
    font-size: 14px;
}

.form-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.section-title {
    color: #303133;
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
}

.color-picker-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.color-tip {
    color: #909399;
    font-size: 12px;
}

.upload-tip {
    color: #909399;
    font-size: 12px;
    margin-top: 10px;
}

.custom-number-input {
    margin-top: 10px;
    width: 300px;
}

.days-input {
    margin: 0 10px;
    width: 100px;
}

.action-buttons {
    text-align: center;
    margin-top: 40px;

    .el-button {
        width: 200px;
    }
}

:deep(.el-upload--picture-card) {
    width: 200px;
    height: 120px;
}

.activation-settings {
    max-width: 800px;
    margin: 20px auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        font-weight: bold;
    }

    .step {
        color: #909399;
        font-size: 0.9em;
    }
}

.activation-condition {
    margin-bottom: 30px;

    h4 {
        color: #606266;
        margin-bottom: 15px;
    }
}

.member-info {
    margin: 25px 0;

    h4 {
        color: #606266;
        margin-bottom: 15px;
    }
}

.add-button {
    margin-top: 15px;
    color: #409EFF;
    padding-left: 0;
}

.function-setting {
    margin-top: 30px;

    h4 {
        color: #606266;
        margin-bottom: 15px;
    }
}

:deep(.el-table__header) {
    background-color: #f8f9fa;
}
</style>